<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='ATM Locations')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	              
	               
	            	<div class="row">
                  		<div class="col-lg-12">
                    		<div class="card">
                        		<div class="card-header bg-flat-color-1">
                            		<strong class="text-white card-title">ATM Location Search Results</strong>
                        		</div>
                        		
                        		<div class="card-body">
                        			<div class="form-group text-left">
				              		<div class="sufee-alert alert with-close alert-success alert-dismissible fade show" th:if="${successMsg}">
				                       <span class="badge badge-pill badge-success">Zero Results</span>
				                         <span th:text="${successMsg}"></span>
				                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				                           <span aria-hidden="true">&times;</span>
				                       </button>
				                   </div>
				                   
				                   <div class="sufee-alert alert with-close alert-danger alert-dismissible fade show" th:if="${errorMsg}">
				                       <span class="badge badge-pill badge-danger">Service Unavailable</span>
				                         <span th:text="${errorMsg}"></span>
				                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				                           <span aria-hidden="true">&times;</span>
				                       </button>
				                   </div>
				              	</div>
                        		
	                        		<div class="col-md-6" th:each="atm : ${atmList}">
				                        <div class="card">
				                            <div class="card-body">
				                                <div class="stat-widget-one">
				                                    <div class="stat-icon dib"><i class="ti-location-pin text-success border-success"></i></div>
				                                    <div class="stat-content dib">
				                                        <div id="atm_name" class="stat-text" th:text="${atm.name}" style="font-weight: bolder;"></div>
				                                        <div id="atm_description" class="stat-text" th:text="${atm.description}"></div>
				                                        <div id="atm_street" class="stat-text" th:text="${atm.street}"></div>
				                                        <div id="atm_state" class="stat-text" th:text="${atm.city} + ', ' + ${atm.state} + '., ' + ${atm.zipcode}"></div>
				                                        <div id="atm_country" class="stat-text" th:text="${atm.country}"></div>
				   
				                                        <div class="stat-text"><i class="ti-map-alt text-primary border-primary"></i>
				                                        	<a id="atm_map" target="_blank" th:href="'https://www.google.com/maps/search/?api=1&query=' + ${atm.latitude} + ',' + ${atm.longitude}" th:text="'Distance: ' + ${atm.distance} + ' Miles'" style="font-weight: bolder;"></a>
				                                       </div>
				                                      
				                                    </div>
				                                </div>
				                            </div>
				                        </div>
				                    </div>

	                     		</div> <!-- End card Body -->
                    		</div> <!-- .card -->
						</div><!--/.col-->
					</div> <!-- End Row -->
                    
                    
                	
	            </div><!-- .animated -->
	        </div><!-- .content -->
	        
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>

</body>
</html>
